<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Vue基础呀</title>
  </head>

  <body>
    <div id="app">
      <ul>
        <li v-for="element in aArray" > {{element}} </li>
      </ul>  <hr>
      <ul>
        <li v-for="(item,index) in aArray" > {{index +1}}：{{item}} </li>
      </ul>  <hr>
      <input type="button" value="添加Man" @click="addMan">
      <input type="button" value="减少Man" @click="subMan">

      <h2 v-for="(item,index) in objectMan"> {{item.name}}</h2>
    </div>
    

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


    <script>
      new Vue({
        el:"#app",
        data: {
          aArray:["小1","小2","小3","小4"],
          objectMan:[
            {name:"哈哈1",age:18},
            {name:"哈哈2",age:20}
          ]
        },
        methods: {
          addMan:function(){
            this.objectMan.push({name:"哈哈3",age:30});
          },
          subMan:function(){
            this.objectMan.shift();//移除最左边的数据
          }
        
        },
      })
    </script>

    <!-- data是这个Vue实例中使用到的数据。用什么就写什么 -->
  </body>
</html>
